import React from 'react';
import {Flex, List, Icon, Card, InputItem, WingBlank, WhiteSpace, Carousel, Toast, Modal, Button} from 'antd-mobile';
import {Panel, Layout} from '../../components/index'
import styles from './index.less';

const FlexItem = Flex.Item;
let moneyKeyboardWrapProps = {
  onTouchStart: e => e.preventDefault(),
};

class BankAdd extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      bankInfo: {}
    }
  }

  componentDidMount() {
  }

  render() {

    return (
      <Layout className={'page-bank-add'}>
        <div className={'b-input'}>
          <InputItem
            clear
            className={'InputItem'}
            placeholder="请输入持卡人姓名">持卡人
          </InputItem>
        </div>

        <div className={'b-input'}>
          <InputItem
            clear
            className={'InputItem'}
            type="phone"
            placeholder="请选择开户行"
          >开户银行</InputItem>
        </div>

        <div className={'b-input'}>
          <InputItem
            clear
            className={'InputItem'}
            type="number"
            placeholder="请输入您的银行卡号"
            moneyKeyboardWrapProps={moneyKeyboardWrapProps}
          >银行卡号</InputItem>
        </div>
        <WhiteSpace size="lg"/>
        <div className={'b-input'}>
          <InputItem
            clear
            className={'InputItem'}
            type="phone"
            placeholder="请输入银行预留手机号码"
            moneyKeyboardWrapProps={moneyKeyboardWrapProps}
          >预留手机</InputItem>
        </div>
        <div className={'b-input'}>
          <Flex>
            <FlexItem>
              <InputItem
                className={'InputItem'}
                type="number"
                moneyKeyboardWrapProps={moneyKeyboardWrapProps}
                placeholder="请输入验证码">
                验证码
              </InputItem>
            </FlexItem>
            <div className={'b-verify'}>
              <Button size={'small'} type={'ghost'}>获取验证码</Button>
            </div>
          </Flex>
        </div>

        <WhiteSpace size="lg"/>
        <div className={'b-btn'}>绑定银行卡</div>
      </Layout>
    );
  }

}

BankAdd.propTypes = {};

export default BankAdd;
